<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>二维码参数生成</title>
<link rel="stylesheet" type="text/css" href="${ctx}/assert/css/jquery.bigcolorpicker.css" />
<script type="text/javascript" src="${ctx}/assert/DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/assert/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${ctx}/assert/js/jquery.bigcolorpicker.js"></script>

<script type="text/javascript">

$(document).ready(function() {
	$("#QRform").validate({
		debug : false,
		rules : {
			number : {
				required : true,
				digits : true,
				min : 1,
				max:5000000
			},
			addNum :{
				required : true
			}
		},
		messages : {
			number : {
				required : "请输入生成数量",
				digits : "生成数量必须为正整数",
				min : "生成数量必须大于0",
				max : "生成数量最大为500万"
			},
			addNum :{
				required : "请选择是否添加编号"
			}
		}
	});
	
	$("#myform").validate({
		debug : false,
		rules : {
			vendorNameSearch : {
				required : true
			},
			productNameSearch : {
				required : true
			}
		},
		messages : {
			vendorNameSearch : {
				required : "请输商家名称"
			},
			productNameSearch : {
				required : "请选择产品名称"
			}
		}
	});
  //点击方框选取颜色 
    $("#img").bigColorpicker(function(el,color){ 
        $(el).css("background-color",color); 
        $("#preColor").val(color);
    }); 
    $("#img2").bigColorpicker(function(el,color){ 
        $(el).css("background-color",color); 
        $("#bgColor").val(color);
    }); 
	
	if("${product.id!=null&&product.id!='' }"=="true"){
		document.getElementById('creatDiv').style.display = "";
		document.getElementById('productDiv').style.display = "";
	}else{
		document.getElementById('creatDiv').style.display = "none";
		document.getElementById('productDiv').style.display = "none";
	}
	$("#createCode_img").click(function(){
		$(".display_box").css({'display':'block'});
		$("#display_box input,#display_box select").prop("disabled",false);
		$('#createCode').removeClass('btn-primary');
		$(this).addClass('btn-primary');
		$("#createBtn").attr("onclick","createQRImg()");
	});
	$('#createCode').click(function(){
		$(".display_box").css({'display':'none'});
		$('#createCode_img').removeClass('btn-primary');
		$(this).addClass('btn-primary');
		$("#createBtn").attr("onclick","createQR()");
	});
});

function backBtn(productId){
	var backUrl = "productList";
	if(productId==null){
		backUrl = "${ctx}/admin/index";
	}
	window.location.href = backUrl;
}

	function search() {
		//表单验证
		if (!$("#myform").valid()){
			return;
		}
		var productId = document.getElementById('productNameSearch').value;
		document.getElementById('id').value = productId;
		$.ajax({
			url: "search",
			data: {productId:productId},
			type: "POST",
			datatype: "json",
			error : function(request) {
				$('#alertModal').modal('show')
				document.getElementById("alertMessage").innerHTML = "Connection error！";
			},
			success: function(data){
				
				document.getElementById('creatDiv').style.display = "";
				document.getElementById('productDiv').style.display = "";

				var vendorNameSearch = document.getElementById('vendorNameSearch').value;
				document.getElementById('vNameSpan').innerHTML="隶属商家名称："+vendorNameSearch;
				var json = eval("("+data+")");  
				var date = format((json.produceDate==null?"":json.produceDate),"yyyy-MM-dd");
				document.getElementById('pNameSpan').innerHTML="产品名称："+(json.pName==null?"":json.pName);
				var id = json.id==null?"":json.id;
				document.getElementById("idSpan").value = id;
				document.getElementById('brandSpan').innerHTML="产品品牌："+(json.brand==null?"":json.brand); 
				document.getElementById('pLicenseSpan').innerHTML="产品生产许可证编号："+(json.pLicense==null?"":json.pLicense);
				document.getElementById('keepTimeSpan').innerHTML="保质期(天)："+(json.keepTime==null?"":json.keepTime);
				document.getElementById('referPriceSpan').innerHTML="价格(元)："+(json.referPrice==null?"":json.referPrice);
				document.getElementById('produceDateSpan').innerHTML="生产日期："+date ;
				document.getElementById('producePlaceSpan').innerHTML="产地："+(json.producePlace==null?"":json.producePlace);
				document.getElementById('dosingSpan').innerHTML="配料："+(json.dosing==null?"":json.dosing);
				document.getElementById('nutrientSpan').innerHTML="营养成分："+(json.nutrient==null?"":json.nutrient);
				document.getElementById('templateCodeSpan').innerHTML="模板编号："+(json.templateCode==null?"":json.templateCode);
			}
		});
	}

	
	
	
	

	function createQRImg(){
		//表单验证
		if (!$("#QRform").valid()){
			return;
		}
		document.getElementById("createBtn").disabled = true;
		$('#alertModal').modal('show')
		document.getElementById("alertMessage").innerHTML = "正在生成二维码参数...";
		window.setTimeout(goon2, 1000);
	}
	
	function createQR() {
		//表单验证
		if (!$("#QRform").valid()){
			return;
		}
		document.getElementById("createBtn").disabled = true;
		$('#alertModal').modal('show')
		document.getElementById("alertMessage").innerHTML = "正在生成二维码参数...";
		//$("#alertModal .modal-footer button").css("display","none");
		window.setTimeout(goon, 1000);

	}
	function goon() {
		$.ajax({
					cache : true,
					type : "POST",
					async: false,
					url : "createQRCode",
					data : $('#QRform').serialize(),// 你的formid
					error : function(request) {
						$('#alertModal').modal('show')
						document.getElementById("alertMessage").innerHTML = "Connection error！";
						document.getElementById("createBtn").disabled = false;
						//$("#alertModal .modal-footer button").css("display","inline");
					},
					success : function(data) {
						//console.log(data)
						var reg = /[.zip]/;
						if (data != null && reg.test(data)) {
							$('#alertModal').modal('show');
							//$("#alertModal .modal-footer button").css("display","inline");
							document.getElementById("alertMessage").innerHTML = "<font color='green'>生成二维码参数完成！</font>";
							document.getElementById("createBtn").disabled = false;
							window.location.href = "${ctx}/view/admin/download.jsp?fileName="+data;
							
						}
					}
				});
	}
	
	function goon2() {
		$.ajax({
					cache : true,
					type : "POST",
					url : "createQRCodeImg",
					ContentType:"json",
					data : $('#QRform').serialize(),// 你的formid
					error : function(request) {
						$('#alertModal').modal('show')
						document.getElementById("alertMessage").innerHTML = "Connection error！";
						document.getElementById("createBtn").disabled = false;
					},
					success : function(data) {
						if (data != null ) {
							$('#alertModal').modal('show')
							document.getElementById("alertMessage").innerHTML = "<font color='green'>生成二维码图片完成！</font>";
							document.getElementById("createBtn").disabled = false;
							window.location.href = "${ctx}/view/admin/download.jsp?fileName="+data;
							
						}
					}
				});
	}
	
	
	
	
	
	function vendorSearch(verdorName){ 
		document.getElementById('creatDiv').style.display = "none";
		document.getElementById('productDiv').style.display = "none";
		
		$.ajax({
			url: "vendorSearch",
			data: {vendorName:verdorName},
			type: "POST",
			dataType:'json', 
			error: function(){
				$('#alertModal').modal('show')
				document.getElementById("alertMessage").innerHTML = "Connection error！";
			},
			success: function(data){
				//console.log(data);
				var item = ""; 
				$.each(data,function(i,result){ 
					item  += '<div><a href="javascript:getValue(\'vendorNameSearch\',\''+result['vName']+'\')">'+result['vName']+'</a></div>';
				}); 
				var div = document.getElementById('sel');
				div.innerHTML = item;
				div.style.visibility = "visible";
			}
		});
	}
	
	function hideDiv(){
		var div = document.getElementById('sel');
		div.style.visibility="hidden";
	}
	function getValue(targetObj,sourceObj){
			document.getElementById(targetObj).value = sourceObj;
			hideDiv();
			productSearch(sourceObj);
	}
	//点击document隐藏下拉层
	$(document).click(function(event){
		hideDiv();
	});
	
	function productSearch(vendorName){
		if(vendorName!=null&&vendorName!=''){
			$.ajax({
				url: "productSearch",
				data: {vendorName:vendorName},
				type: "POST",
				dataType:'json', 
				success: function(data){
					/* if (data.length == 0) {
						$('#alertModal').modal('show')
						document.getElementById("alertMessage").innerHTML = "该厂商未添加产品信息 ";
						return ;
					} */
					var item = ""; 
					$.each(data,function(i,result){ 
						item  += '<option value="'+result['id']+'">'+result['p_name']+'</option>';
					}); 
					var div = document.getElementById('productNameSearch');
					div.innerHTML = item;
					
				}
			});
		}else{
			var div = document.getElementById('productNameSearch');
			div.innerHTML = "";
		}
		
		
	}
	
	
function format(time, format){
	    var t = new Date(time);
	    var tf = function(i){return (i < 10 ? '0' : '') + i};
	    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
	        switch(a){
	            case 'yyyy':
	                return tf(t.getFullYear());
	                break;
	            case 'MM':
	                return tf(t.getMonth() + 1);
	                break;
	            case 'mm':
	                return tf(t.getMinutes());
	                break;
	            case 'dd':
	                return tf(t.getDate());
	                break;
	            case 'HH':
	                return tf(t.getHours());
	                break;
	            case 'ss':
	                return tf(t.getSeconds());
	                break;
	        }
	    })
	}

</script>
<style type='text/css'>
.myDiv {
	border: 1px solid #7a9dd3;
	background: #fff;
	overflow: scroll;
	overflow-x: hidden;
	scrollbar-face-color: #FFF0D9;
	position: absolute;
	z-index: 10;
	font-size: 12px;
	width: 100%;
}

.myDiv a {
	text-decoration: none;
	display: block;
	height: 28px;
	line-height: 28px;
	text-indent: 4px;
	text-align: left;
	font-size: 14px;
}

.myDiv a:link, .myDiv a:visited {
	color: #2A1B00;
	background-color: #fff;
}

.myDiv a:hover, .myDiv a:active {
	background-color: #1e91ff;
	color: #fff;
}

.display_box {
	display: none;
}

.relative_box {
	position: relative;
}

.relative_box  input {
	border-radius: 0 5px 5px 0 !important;
}
#vendorNameSearch-error{
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 9999;
  height: 100%;
  line-height: 45px;
}
</style>
</head>
<body onLoad="init()">


      <div class="row">
            <div class="col-lg-12">

               <div class="row wrapper border-bottom white-bg ibox-title">
                         <div class="col-lg-11">
                             <h3>二维码参数生成</h3>
                         </div>
                         <div class="col-lg-1">
                             <a class="btn btn-success btn-block" onclick="backBtn(${product.id})">返回
                             </a>
                         </div>
                </div>
					
					
					
					
<div class="wrapper wrapper-content animated fadeInRight">
               <div class="ibox-title">
							<form class="navbar-form text-center" role="search"
								id="myform" name="myform">

								<div class="row">
								
							
										<i class="fa fa-search fa-2x" style="color: #ddd;"></i>
								
							<div class="form-group">
											<div class="input-group">
												<div class="input-group-addon">商家名称</div>
												<div class="relative_box">
													<input type="text" class="form-control input-lg"
														maxlength="100" id="vendorNameSearch"
														name="vendorNameSearch" 
														onclick="vendorSearch(this.value)"
														 oninput="vendorSearch(this.value)"
														onkeyup="productSearch(this.value)"  
														placeholder="商家名称">
													<div id='sel' class='myDiv'
														style="top: 40px; height: 160px; visibility: hidden;">
													</div>
												</div>
											</div>
										</div>
								<div class="form-group">
											<div class="input-group">
											<div class="input-group-addon">产品名称</div>
											<div class="relative_box">
												
												<select class="form-control input-lg"
													name="productNameSearch" id="productNameSearch"
													onchange="search()">
													<option selected="selected">--请先选择商家--</option>
												</select>
											</div>
											</div>
										</div>
				
										<button type="button" class="btn btn-success"
											onclick="search()">确定</button>
					

								</div>
							</form>
												<div class="row">
												<div class="hr-line-dashed"></div>
						<div class="col-sm-6" id="productDiv" style="display: none">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3>产品信息</h3>
								</div>
								<div class="panel-body">
									<ul class="list-group">
										<li class="list-group-item"><span id="vNameSpan"
											style="color: blue">生产商：${vendor.VName}</span></li>
										<li class="list-group-item"><span id="pNameSpan"
											style="color: blue">产品名称：${product.PName}</span></li>
										<li class="list-group-item"><span id="brandSpan"
											style="color: blue">品牌：${product.brand}</span></li>
										<li class="list-group-item"><span id="pLicenseSpan">产品生产许可证编号：${product.PLicense }</span>
										</li>
										<li class="list-group-item"><span id="referPriceSpan">参考价格(单位/元)：${product.referPrice }</span>

										</li>
										<li class="list-group-item"><span id="producePlaceSpan">产地：${product.producePlace }</span>
										</li>
										<li class="list-group-item"><span id="produceDateSpan">生产日期：<fmt:formatDate
													value="${product.produceDate }" pattern="yyyy-MM-dd" /></span></li>
										<li class="list-group-item"><span id="keepTimeSpan">保质期(单位/天)：${product.keepTime }</span>
										</li>
										<%-- <c:if test="${product.dosing != null && not empty  product.dosing}"> --%>
											<li class="list-group-item"><span id="dosingSpan">配料：${product.dosing }</span>
											</li>
										<%-- </c:if>
										<c:if test="${product.nutrient != null && not empty  product.nutrient}"> --%>
											<li class="list-group-item"><span id="nutrientSpan">营养成分：${product.nutrient }</span>
											</li>
										<%-- </c:if>
										<c:if test="${product.templateCode != null && not empty  product.templateCode}"> --%>
											<li class="list-group-item"><span id="templateCodeSpan">模板编号：${product.templateCode }</span>
											</li>
										<%-- </c:if> --%>

									</ul>
								</div>
							</div>
						</div>

						<div class="col-sm-6" id="creatDiv" style="display: none">

							<div class="panel panel-default">
								<div class="panel-heading">
									<h3>参数设置</h3>
<!-- 									<button type="button" class="btn btn-primary " id="createCode">生成二维码参数</button> -->
<!-- 									<button style="display: none" class="btn " id="createCode_img">生成二维码图片</button> -->
								</div>
								<div class="panel-body">
									<!-- 							<form method="post" name="QRform" id="QRform"  enctype="multipart/form-data" > -->
									<form method="post" name="QRform" id="QRform">
										<input type="hidden" name="id" id="idSpan"
											value="${product.id }" />


										<div class="row">
											<div class="form-group">
												<label for="foodLicenceCode" class="col-sm-3 control-label">生成数量：</label>
												<div class="col-sm-6">
													<input type="text" class="form-control " name="number"
														maxlength="10" placeholder="请输入不大于500万的正整数" />

												</div>
											</div>
											<br> <br>
										</div>

										<div class="row">
											<div class="form-group">
												<label for="foodLicenceCode" class="col-sm-3 control-label">生成编号：</label>
												<div class="col-sm-6">
													<select class="form-control" name="addNum" id="addNum">
														<option value="1" selected="">是</option>
														<option value="0">否</option>
													</select>
												</div>
											</div>
											<br> <br>
										</div>

										<!--  <div class="row">
										<div class="form-group">
											<label for="foodLicenceCode" class="col-sm-3 control-label">销售区域：</label>
											<div class="col-sm-3">
												<select class="form-control " name="province"
											id="province" onchange="select()">
											<option selected="selected">--请先选择省--</option>
										</select>
											</div>
											<div class="col-sm-3">
												<select class="form-control " name="city"
											id="city" onchange="select()">
											<option selected="selected">--请先选择市--</option>
										</select>
											</div>
										</div>
										
										<br> <br>
									</div>
									-->
										<div class="row">
											<div class="form-group">
												<label for="productCode" class="col-sm-3 control-label">链接前缀：</label>
												<div class="col-sm-6">
													<!--  <select class="form-control" name="QRCodeURL">
												<c:forEach items="${listUrl }" var="url">
													<option value="${url}">${url}</option>
												</c:forEach>
											</select>-->
													<input type="text" class="form-control " name="QRCodeURL"
														id="QRCodeURL" readonly="readonly" value="${url}" />
												</div>
												<button type="button" class="btn btn-primary" id="editUrl"
													onclick="edit();">编辑</button>
											</div>
											<br> <br>
										</div>
										<div class="display_box" id="display_box">
											<div class="row">
												<div class="form-group">
													<label for="qrsize" class="col-sm-3 control-label">大小(px)：</label>
													<div class="col-sm-6">
														<select class="form-control " name="qrsize" id="qrsize"
															disabled="disabled">
															<option value="200" selected="selected">200*200</option>
															<option value="100">100*100</option>
															<option value="300">300*300</option>
															<option value="400">400*400</option>
															<option value="500">500*500</option>
														</select>
													</div>
												</div>
												<br> <br>
											</div>
											<div class="row">
												<div class="form-group">
													<label for="qrcolor" class="col-sm-3 control-label">颜色：</label>
													<div class="col-sm-3">
														<label for="qrcolor" class=" control-label"
															style="line-height: 35px; vertical-align: top;">前景</label>
														<a href="javascript:void(0)" id="img"
															style="width: 35px; height: 35px; display: inline-block; border: 1px solid #ccc;"></a>
														<input type="hidden" name="preColor" id="preColor"
															disabled="disabled" />
													</div>
													<div class="col-sm-3">
														<label for="qrcolor" class=" control-label"
															style="line-height: 35px; vertical-align: top;">背景</label>
														<a href="javascript:void(0)" id="img2"
															style="width: 35px; height: 35px; display: inline-block; border: 1px solid #ccc;"></a>
														<input type="hidden" name="bgColor" id="bgColor"
															disabled="disabled" />
													</div>
												</div>
												<br> <br>
											</div>
											<!-- 									<div class="row"> -->
											<!-- 										<div class="form-group"> -->
											<!-- 											<label for="qrlogo" class="col-sm-3 control-label">Logo(可选)：</label> -->
											<!-- 											<div class="col-sm-6"> -->
											<!-- 												<input type="file" class="form-control " name="logoFile"  disabled="disabled"/> -->
											<!-- 											</div> -->
											<!-- 										</div> -->
											<!-- 										<br> <br> -->
											<!-- 									</div> -->
										</div>
									</form>
								<div class="col-sm-12">
									<button type="button" class="btn btn-primary  center-block"
										onclick="createQR()" id="createBtn">确定</button>
								</div>
								</div>
							</div>
						</div>
					</div>
						</div>
					</div>


				</div>
				</div>
		
	<script type="text/javascript" src="${ctx}/assert/js/city.js"></script>
	<script type="text/javascript">
		$(function() {
			//状态改变
			$(".btn_manage").click(function() {
				var id = $(this).parent().parent().attr('id');
				$.ajax({
					url : "dreamComeTrue.action",
					type : "post",
					data : "id=" + id,
					dataType : "json",
					success : function(data) {
						if (data.success) {
							location.reload();
						}else{
							$('#alertModal').modal('show')
							document.getElementById("alertMessage").innerHTML = "修改失败";
						}
					},
					error: function(){
						$('#alertModal').modal('show')
						document.getElementById("alertMessage").innerHTML = "Connection error！";
					}
				});
			});
		});
		
		function edit(){
			var url = $("#QRCodeURL").val();
			$('#editModal').modal('show');
			$("#url").val(url);
		}
		
		function submitUrl(){
			var url = $("#url").val();
			var id = $("#idSpan").val();
			$.ajax({
				url : "updateUrl",
				type : "post",	 
				data : {"url" : url},
				success : function(msg) {
					if(msg == "success"){
						window.location.href="QRCode?productId="+id;
					}									
				},
				error : function(){
					$('#alertModal').modal('show')
					document.getElementById("alertMessage").innerHTML = "Connection error！";
				}
			});
		}
	</script>




	<!-- Modal -->
	<div class="modal fade" id="alertModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertMessage"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" data-dismiss="modal" class="btn btn-primary">确定</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
		aria-labelledby="editLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="editLabel">提示</h4>
				</div>
				<div class="modal-body" id="editMessage">
					链接前缀：<input id="url" type="text" class="form-control " />
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" data-dismiss="modal" class="btn btn-primary"
						onclick="submitUrl();">确定</button>
				</div>
			</div>
		</div>
	</div>


</body>
</html>